import { Flex, HighlightMatchProps, TextField } from '@aws-amplify/ui-react'; import * as React from 'react'; export interface HighlightMatchPropControlsProps extends HighlightMatchProps { setChildren: ( value: React.SetStateAction<HighlightMatchProps['children']> ) => void; setQuery: (value: React.SetStateAction<HighlightMatchProps['query']>) => void; } interface HighlightMatchPropControlsInterface { (props: HighlightMatchPropControlsProps): JSX.Element; } export const HighlightMatchPropControls: HighlightMatchPropControlsInterface = ({ children, setChildren, query, setQuery }) => { return ( <Flex direction="column"> <TextField label="Query" value={query} onChange={(event) => setQuery(event.target.value)} /> <TextField label="Main text" value={children} onChange={(event) => setChildren(event.target.value)} /> </Flex> ); };